export const vLazyLoad = {
    mounted(el, binding) {
        // 使用更合适的阈值和rootMargin
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        binding.value?.(true);
                        observer.unobserve(el);
                    }
                });
            },
            {
                threshold: 0,  // 只要出现就触发
                rootMargin: '50px', // 减小预加载距离
                // 添加root选项限制观察范围
                root: document.querySelector('.grid-layout-container')
            }
        );

        observer.observe(el);
        el._observer = observer;
    },
    unmounted(el) {
        if (el._observer) {
            el._observer.disconnect();
            delete el._observer;
        }
    }
};

export function setLazyLoadDirective(app) {
    app.directive('lazy-load', vLazyLoad);
}